/**
 * 自定义Tab栏样式修复
 * 解决tab栏遮罩其他div的问题
 */

/* 降低tab栏的层级，避免遮挡弹出层 */
.tab-bar {
  z-index: 99 !important; /* 降低到合理层级 */
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1) !important; /* 添加阴影提升层次感 */
}

/* 确保所有页面容器有足够的底部padding */
.page-container,
.container,
.discover-page,
.my-page {
  padding-bottom: 120rpx !important; /* 确保内容不被tab栏遮挡 */
  box-sizing: border-box;
}

/* 特殊处理有底部操作的页面 */
.bottom-safe-area {
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom)) !important;
}

/* 滚动容器底部间距 */
.scroll-container {
  padding-bottom: 120rpx;
}

/* 弹出层样式，确保在tab栏之上 */
.modal-overlay,
.popup-overlay,
.dropdown-menu {
  z-index: 1000 !important; /* 确保弹出层在tab栏之上 */
}

/* 底部按钮区域增加额外空间 */
.bottom-actions {
  margin-bottom: 120rpx;
}

/* 列表底部间距 */
.list-container {
  padding-bottom: 120rpx;
}

/* 修复可能的fixed定位冲突 */
.fixed-bottom {
  bottom: 120rpx !important; /* 避免与tab栏重叠 */
}

/* 安全区域适配 */
.safe-area-tabbar {
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}